<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="js/vue.js"></script>
	</head>

	<body>
		<div id="vue_det">
			<h1>site : {{site}}</h1>
			<h1>url : {{url}}</h1>
			<h1>{{details()}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		// 我们的数据对象
		var data = {
			site: "菜鸟教程",
			url: "www.runoob.com",
			alexa: 10000
		}

		var vm = new Vue({
			el: "#vue_det",
			data: data,
			methods: {
				details: function() {
					return this.site + " - 学的不仅是技术，更是梦想！";
				}
			}

		});

		// 它们引用相同的对象！
		document.write(vm.site === data.site) // true
		document.write("<br>")
		// 设置属性也会影响到原始数据
		vm.site = "Runoob"
		document.write(data.site + "<br>") // Runoob

		// ……反之亦然
		data.alexa = 1234
		document.write(vm.alexa) // 1234

		// 除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
		document.write("<br>") // new line
		document.write(vm.$data === data) // true
		document.write("<br>") // new line
		document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>

</html>